<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评估准则构建展示</title>
    <meta name="description" content="评估准则构建软件">
    <!-- Bootstrap CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- 字体CSS -->
    <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/bootstrap-select/bootstrap-select.css" rel="stylesheet" type="text/css" />
    <!-- 自定义样式 -->
    <!--<link href="assets/css/style.css" rel="stylesheet" type="text/css" />-->
    <link rel="stylesheet" href="./assets/layui/css/layui.css">
    <link rel="stylesheet" href="./assets/css/norm/normChart.css">
    <style>
    </style>
</head>

<body class="adminbody">
<div id="main">
    <div class="content-page">
        <div id="index-main">
            <div class="index-content">
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <div id="chart1"></div>
                    </div>
                    <div class="layui-col-xs6">
                        <div id="chart2">

                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <div id="chart3"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<!-- 上述js路径需要改成你本地的 -->
<script src="assets/js/jquery.min.js"></script>
<script src="./assets/layui/layui.js"></script>
<script src="./assets/js/echarts.min.js"></script>

<script>

    var color=[ "#3fb1e3",
        "#6be6c1",
        "#626c91",
        "#a0a7e6",
        "#c4ebad",
        "#96dee8"];
    createLine();
    createPie();
    createBar();
    //折线图
    function createLine() {
        var myChart = echarts.init(document.getElementById('chart1'));
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/x-www-form-urlencoded",//application/x-www-form-urlencoded,application/json
            //请求地址
            url : "/bs/standardManage/getDataLast",
            //数据
            data:'',
            //请求成功
            success : function(res) {
                if (res.status==0) {
                    var legendArr=[],seriesData=[];
                    var data=res.data;
                    for (let i of data.lists){
                        seriesData.push({
                            name: i.name,
                            type: 'line',
                            areaStyle: {},
                            data: i.yData
                        });
                        legendArr.push(i.name);
                    }
                    var option = {
                        title: {
                            text:data.title
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:legendArr
                        },
                        color,
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.xData
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series:seriesData
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.error(e.status);
                console.error(e.responseText);
            }
        });
    }
    //    饼图
    function createPie() {
        var myChart = echarts.init(document.getElementById('chart2'));
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/x-www-form-urlencoded",//application/x-www-form-urlencoded,application/json
            //请求地址
            url : "/bs/standardManage/getStandardByMon",
            //数据
            data:'',
            //请求成功
            success : function(res) {
                var legendArr=[],dataArr=[];
                if (res.status==0){
                    for (let i of res.data.list){
                        legendArr.push(i.category);
                        dataArr.push({value:i.number,name:i.category});
                    }
                    var option = {
                        title: {
                            text: res.data.title,
                            subtext: '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'horizontal',
                            left: 'left',
                            top:26,
                            data: legendArr
                        },
                        color,
                        series: [
                            {
                                name: '准则生成量',
                                type: 'pie',
                                radius: '70%',
                                center: ['50%', '60%'],
                                data: dataArr,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.error(e.status);
                console.error(e.responseText);
            }
        });
    }
    //    柱图
    function createBar() {
        var myChart = echarts.init(document.getElementById('chart3'));
        $.ajax({
            //请求方式
            type:"POST",
            //请求的媒体类型
            contentType:"application/x-www-form-urlencoded",//application/x-www-form-urlencoded,application/json
            //请求地址
            url:"/bs/standardManage/getDataLast",
            //数据
            data:'',
            //请求成功
            success : function(res) {
                if (res.status==0) {
                    var legendArr=[],seriesData=[];
                    var data=res.data;
                    for (let i of data.lists){
                        seriesData.push({
                            name: i.name,
                            type: 'bar',
                            data: i.yData,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        });
                        legendArr.push(i.name);
                    }
                    var option = {
                        title: {
                            text: data.title,
                            subtext: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:legendArr
                        },
                        color,
                        toolbox: {
                            show: true,
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                data: data.xData
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series:seriesData
                    };
                    myChart.setOption(option);
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.error(e.status);
                console.error(e.responseText);
            }
        });
    }
</script>
</body>

</html>